<template>
  <view class="lite-loadmore" :style="{ marginTop: marginTop + 'px' }">
    <view v-if="status === 'loading'" class="lite-loadmore__loading">
      <view class="lite-loadmore__spinner" v-if="loadingIcon === 'spinner'">
        <view class="spinner"></view>
      </view>
      <text class="lite-loadmore__text">{{ loadingText }}</text>
    </view>
    <view v-else-if="status === 'loadmore'" class="lite-loadmore__more">
      <text class="lite-loadmore__text">{{ loadmoreText }}</text>
    </view>
    <view v-else-if="status === 'nomore'" class="lite-loadmore__nomore">
      <text class="lite-loadmore__text">{{ nomoreText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LiteLoadmore',
  props: {
    status: {
      type: String,
      default: 'loadmore', // loadmore, loading, nomore
      validator: (value) => ['loadmore', 'loading', 'nomore'].includes(value)
    },
    loadingText: {
      type: String,
      default: '正在加载...'
    },
    loadmoreText: {
      type: String,
      default: '加载更多'
    },
    nomoreText: {
      type: String,
      default: '没有更多了'
    },
    loadingIcon: {
      type: String,
      default: 'spinner'
    },
    marginTop: {
      type: [String, Number],
      default: 10
    }
  }
}
</script>

<style scoped>
.lite-loadmore {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.lite-loadmore__loading,
.lite-loadmore__more,
.lite-loadmore__nomore {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lite-loadmore__text {
  font-size: 14px;
  color: #999999;
}

.lite-loadmore__spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #999999;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>